<template>
  <div>
    <div class="pao_bg_top">
      <div>
        <img src="../assets/static/index/background.png" style="width:100%;height:3rem" />
      </div>
      <div class="luzheng_top_city">
        <div>
          <img src="../assets/static/index/location_white.png" style="width:0.24rem;height:0.29rem;" />
        </div>
        <div style="margin-left:0.2rem">
          <span>浙江省-杭州市</span>
        </div>
        <div style="margin-left:0.2rem">
          <img src="../assets/static/index/next.png" style="width:0.14rem;height: 0.24rem;" />
        </div>
      </div>
    </div>
    <div class="banner_top">
      <div class="banner_top_content">
        <div class="banner_top_content_item">
          <div
            v-for="(item,index) in businessList"
            :key="index"
            v-if="item.isTop == 1"
            class="banner_children"
            @click="gongshang(item.name,item.price,item.remark,item.matters,item.id,item.skipType)"
          >
            <div style="padding-left:0.10rem;padding-right:0.15rem;">
              <img :src="indexImgUrl+item.icon" style="width: 0.76rem;height: 0.76rem;" />
            </div>
            <div style="padding-left:0.1rem;padding-right:0.15rem;line-height: 0.4rem;">
              <span class="font_size07">{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner_small_icon_list">
      <div class="banner_small_icon">
        <div
          v-for="(item,index) in businessList"
          :key="index"
          v-if="item.isTop == 0"
          class="banner_small_icon_tt"
          @click="gongshang(item.name,item.price,item.remark,item.matters,item.id,item.skipType)"
        >
          <div style="padding-left:0.1rem;padding-right:0.15rem;">
            <img :src="indexImgUrl+item.smallIcon" style="width:0.46rem;height: 0.46rem;" />
          </div>
          <div style="padding-left:0.1rem;padding-right:0.15rem;line-height: 0.4rem;">
            <span class="font_size07">{{item.name}}</span>
          </div>
        </div>
        <div class="banner_small_icon_tt" @click="chajia()">
          <div>
            <img src="../assets/static/index/chajia.png" style="width: 0.47rem;height: 0.48rem;" />
          </div>
          <div>
            <span class="font_size07">补差价</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      businessList: "",
      indexImgUrl: "https://api.taxwen.com/pzt/",
      currentIndex:0
    };
  },
  mounted() {
    let params = new URLSearchParams();
    params.append("source", "weixin");
    let _this = this;
    _this.$api.getBusinessList(params)
      .then(res => {
        console.log(res);
        if (res.status == 200) {
          _this.businessList = res.data;
        }
      })
      .catch(error => {});
  }
};
</script>

<style>
  body{
    background-color: #ffffff;
  }
  .luzheng_info {
    padding: 0 0.86rem 2.32rem 0.86rem;
  }

  .luzheng_info_child {
    background-color: #ffffff;
    width: 5.8rem;
    height: 8.5rem;
    border-radius: 0.2rem;
  }

  .luzheng_img_top {
    position: relative;
    top: 1rem;
  }

  .luzheng_info_child_item {
    padding-top: 1.1rem;
    border-bottom: 0.01rem dashed #657bff;
    padding-bottom: 0.4rem;
  }

  .luzheng_info_name {
    padding: 0 0.28rem 0 0.28rem;
  }

  .luzheng_location {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 0.7rem;
    justify-content: center;
  }

  .luzheng_city_kkk {
    margin-top: 0.32rem;
    text-align: center;
  }

  .luzheng_city {
    display: inline-block;
    width: 4.68rem;
    height: 1rem;
    border: 0.01rem solid #bfbfbf;
    margin-left: 0.2rem;
    text-align: center;
    line-height: 1rem;
  }

  .luzheng_btn {
    padding-left: 0.6rem;
    margin-top: 0.8rem;
  }

  .luzheng_ss_btn {
    width: 4.78rem;
    height: 1rem;
    background-color: #657bff;
    border-radius: 0.01rem;
    line-height: 1rem;
    display: inline-block;
  }

  .modal_box {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    bottom: 0;
    z-index: 900;
  }
  .selectProvince {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.3rem;
    border-bottom: 0.01rem solid #f2f2f2;
    position: relative;
    z-index: 1000;
    background: #ffffff;
  }
  .picker-view {
    width: 100%;
    height: 6rem;
    margin-top: 0.2rem;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
  }
  .luzheng_top {
    position: relative;
  }

  .luzheng_top_line {
    position: absolute;
    top: 2.6rem;
    left: 0.1rem;
  }

  .luzheng_top_run {
    position: absolute;
    top: 2.4rem;
    left: 0.8rem;
  }

  .luzheng_top_city {
    position: absolute;
    top: 0.88rem;
    right: 0.6rem;
    height: 0.48rem;
    background-color:rgb(0, 0, 0, 0.5);
    border-radius: 0.24rem;
    line-height: 0.5rem;
    padding-left: 0.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #ffffff;
    font-size: 0.32rem;
    padding-right: 0.2rem;
  }

  .luzheng_top_txt {
    position: absolute;
    top: 3.2rem;
    left: 1.6rem;
  }

  .luzheng_adv_img {
    padding: 0.4rem;
  }

  .luzheng_adv_img_flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }

  .luzheng_adv_img_flex .luzheng_adv_img_flex_item {
    position: relative;
    padding-bottom: 0.4rem;
  }

  .luzheng_gs_tt {
    position: absolute;
    top: 0.4rem;
    left: 0.2rem;
  }
  .banner_top {
    padding: 0.2rem;
    position: relative;
    top: -0.4rem;
  }
  .banner_top_content {
    background-color: #ffffff;
    border-radius: 0.1rem;
    box-shadow: 0.08rem 0.1rem 0.08rem #f4f9ff;
    padding: 0.2rem;
  }
  .banner_top_content_item {
    display: flex;
    flex-direction: row;
  }
  .banner_top_content_item .banner_children {
    width: 25%;
    text-align: center;
  }
  .banner_top_content_item .banner_children image {
    display: inline-block;
  }
  .banner_small_icon_list {
    position: relative;
    top: -0.2rem;
  }
  .banner_small_icon {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .banner_small_icon .banner_small_icon_tt {
    width: 25%;
    text-align: center;
    padding-bottom: 0.5rem;
  }
  .banner_small_icon .banner_small_icon_tt image {
    display: inline-block;
  }
  .pao_bg_top {
    position: relative;
  }
</style>
